<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div>
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        基础资料/<span style="color: #0098FF;">货物管理</span>
                    </span>
                </div>
                <div style="float: left;padding-left: 25px;padding-top: 20px;">
                    <el-button type="primary" @click="Add">新增</el-button>
                </div>
                <div style="padding-right: 310px;padding-top: 50px;">
                    <p>
                        创建日期:&nbsp;&nbsp;
                        <el-date-picker v-model="time" type="daterange" range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" :size="size" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" />
                        <el-input v-model="name" style="width: 240px;margin-left: 10px;" placeholder="请输入货品名称搜索"
                            :prefix-icon="Search" />&nbsp;&nbsp;
                        <el-button type="primary" @click="Get">搜索</el-button>
                        <el-button plain @click="CZ">重置</el-button>
                    </p>
                </div>
                <div style="padding-left: 25px;">
                    <el-table :data="tableData" style="width: 1200px;height: 410px;">
                        <el-table-column property="cg_id" label="货物id" width="" v-if="false"></el-table-column>
                        <el-table-column property="cg_name" label="货物名称" width=""></el-table-column>
                        <el-table-column property="cg_unit" label="单位" width=""></el-table-column>
                        <el-table-column property="cg_length" label="长(m)" width=""></el-table-column>
                        <el-table-column property="cg_width" label="宽(m)" width=""></el-table-column>
                        <el-table-column property="cg_height" label="高(m)" width=""></el-table-column>
                        <el-table-column property="cg_volume" label="体积(m³)" width=""></el-table-column>
                        <el-table-column property="cg_weight" label="重量(kg)" width=""></el-table-column>
                        <el-table-column property="cg_value" label="价值(元)" width=""></el-table-column>
                        <el-table-column property="cg_status" label="状态" width="">
                            <template #default="scope">
                                <span style="color: #00FF00;">{{ State(scope.row.cg_status) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="" label="操作" width="150">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="update(scope.row.cg_id)">编辑</el-button>
                                <el-button plain link size="small" type="danger" @click="del(scope.row.cg_id)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination style="float: right;padding-top: 10px;" v-model:current-page="currentPage"
                    v-model:page-size="PageSize" :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="false"
                    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="count"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive,onMounted } from 'vue'
//import axios from 'axios';
import $http from '@/axios/base.js';
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from "vue-router";
export default {
    setup() {
        let tableData = ref([]);
        let currentPage = ref(1);
        let PageSize = ref(10);
        let count = ref();
        let name = ref('');
        let time = ref('');
        let router=useRouter();

        onMounted(()=>{
            show();
            show2();
        })

        function show() {  //查询全部
            $http.get("http://localhost:5261/api/Cargo_ment/GetCargo_s?currentPage=" + currentPage.value + "&PageSize=" + PageSize.value).then((res) => {
                tableData.value = res;
                console.log(tableData.value);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }
        

        function show2() {   //查询总数
            $http.get("http://localhost:5261/api/Cargo_ment/GetCount?time="+time.value+"&Cg_name="+name.value).then((res) => {
                count.value = res;
            })
        }
        

        function Get() {   //条件查询
                $http.get("http://localhost:5261/api/Cargo_ment/GetCargo_Ment_time?time=" + time.value + "&Cg_name=" + name.value +
                    "&currentPage=" + currentPage.value + "&PageSize=" + PageSize.value)
                    .then((res) => {
                        tableData.value = res;
                        console.log(tableData.value);
                        show2();
                    }).catch((err) => {
                        console.log("错误:" + err);
                    })
        }

        function State(state) {  //状态转换
            switch (state) {
                case 0:
                    return '停用'
                case 1:
                    return '启用'
            }
        }

        function handleSizeChange(val) {
            PageSize.value = val;
            //console.log(PageSize.value);
            // alert(PageSize.value)
            show();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            //alert(currentPage.value);
            show();
        }

        function del(id) {
            ElMessageBox.confirm(
                '确认是否删除?', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
                draggable: true,
                overflow: true,
                lockScroll: false //防止抖动
            }
            ).then(() => {
                $http.delete("http://localhost:5261/api/Cargo_ment/Delete?Cg_id=" + id).then((res) => {
                    if (res) {
                        ElMessage.success("删除成功!");
                        show();
                        show2();
                    } else {
                        ElMessage.success("删除失败!");
                    }
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
            })

        }

        function update(id) {
            router.push({path:'/HWGLUpdate',query:{id}});
        }

        function XQ(id){
            router.push({path:'/CYSXQ',query:{id}});
        }

        function CZ() {
            name.value = '';
            time.value = '';
            show();
            show2();
        }

        function Add(){
            router.push('/HWGLAdd');
        }

        return {
            tableData,
            currentPage,
            PageSize,
            count,
            handleSizeChange,
            handleCurrentChange,
            name,
            time,
            CZ,
            del,
            update,
            Search,
            Get,
            State,
            Add,
            XQ
        }
    }
}
</script>

<style scoped>
.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
}

.title {
    padding-right: 1030px;
    padding-top: 20px;
}
</style>